<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
		<title>点击表格切换图片 </title>	
		
    </head>
    <style>
        .td-class{
            width:20px;
            height: 20px;
        }
    </style>
    <script type="text/javascript">  
		window.onload = function(){
			var tab = document.getElementById("tab");
			var oImg = document.getElementById("showImg");
			
			//事件委托,给td的父元素绑定事件，由父元素代替子元素执行事件函数
			tab.addEventListener("click",function(evt){
				//如何确定，该事件是不是由冒泡产生，又是由哪个元素冒泡过来的？
				var e = evt || event;
				//target属性，代表事件触发的源头，可以直接获取到事件触发元素
				var td = e.target;
				var tdlist = this.children[0].children[0].children;
				for(var i=0; i<tdlist.length; i++){
					tdlist[i].style.background = "";
				}
				td.style.background = "blue";
				
				oImg.src = "00"+td.getAttribute("index")+".jpg";
			},true);
			
			var index = 2;
			setInterval(function(){
				oImg.src = "00"+index+".jpg";
				var tds = tab.children[0].children[0].children;
				for(var i=0; i<tds.length; i++){
					tds[i].style.background = "";
				}
				tds[index-1].style.background = "blue";
				if(index++ == 4){
					index = 1;
				}
			},1000);
		}
    </script>
	<body>
        <table id="tab" border="1">
            <tr>
                <td index=1 class="td-class" style="background:blue"></td>
                <td index=2 class="td-class"></td>
                <td index=3 class="td-class"></td>
                <td index=4 class="td-class"></td>
            </tr>
        </table>
        <img id="showImg" src="001.jpg" style="width:300px"/>
	</body>
</html>